﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scalee=1.0">
		<link rel="icon" href="/static/favicon.ico">

		<title>Jay Xiong's Blog</title>

		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<!-- Custom styles for this template -->
		<link href="/static/blog.css" rel="stylesheet">
	</head>

	<body>

		<div class="blog-masthead">
		  <div class="container">
			<nav class="blog-nav">
			  <a class="blog-nav-item active" href="/blog/">Blog</a>
			  <a class="blog-nav-item" href="/lists/">To-Do list</a>
			  <a class="blog-nav-item" href="/blog/">Home</a>
			  <a class="blog-nav-item" href="#">Press</a>
			  <a class="blog-nav-item" href="#">New hires</a>
			  <a class="blog-nav-item" href="#">About</a>
			</nav>
		  </div>
		</div>
		
		<div class="container">

			<div class="blog-header">
				<h1 class="blog-title">Jay Xiong's Blog</h1>
				<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
			</div>

			<div class="row">

				<div class="col-sm-8 blog-main">

					{% for article in articles %}
						<div class="blog-post">
							<h2 class="blog-post-title"><a href={{ article.id }}>{{ article.title }}</a></h2>
							<p class="blog-post-meta">{{ article.date_time }}</p>
							<p>{{ article.content }}</p>
						</div>
					{% endfor %}

				</div>

				<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
					<div class="sidebar-module sidebar-module-inset">
						<h4>About</h4>
						<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
					</div>
					<div class="sidebar-module">
						<h4>Archives</h4>
						<ol class="list-unstyled">
						  <li><a href="#">March 2014</a></li>
						  <li><a href="#">February 2014</a></li>
						  <li><a href="#">January 2014</a></li>
						  <li><a href="#">December 2013</a></li>
						  <li><a href="#">November 2013</a></li>
						  <li><a href="#">October 2013</a></li>
						  <li><a href="#">September 2013</a></li>
						  <li><a href="#">August 2013</a></li>
						  <li><a href="#">July 2013</a></li>
						  <li><a href="#">June 2013</a></li>
						  <li><a href="#">May 2013</a></li>
						  <li><a href="#">April 2013</a></li>
						</ol>
					</div>
					<div class="sidebar-module">
						<h4>Elsewhere</h4>
						<ol class="list-unstyled">
						  <li><a href="#">GitHub</a></li>
						  <li><a href="#">Twitter</a></li>
						  <li><a href="#">Facebook</a></li>
						</ol>
					</div>
				</div><!-- /.blog-sidebar -->

			</div><!-- /.row -->

		</div><!-- /.container -->

		<div class="blog-footer">
		  <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
		  <p>
			<a href="#">Back to top</a>
		  </p>
		</div>

	</body>
</html>